<template>
	<view class="page-content">
		<zm-page-navview title="私人定制" :isBack="false" :borderBottom="false" slot="top" />
		<view class="back-content">
			<view class="flex-content">
				<image class="logoV" src="/static/logo.png"></image>
				<view class="titleV">私人订制小程序</view>
				<button class="wechatBtn" type="primary" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">开始使用</button>
				<button class="otherBtn" type="primary" @click="clickOtherLogin">其他方式登录 ></button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'auth',
		components: {
		},

		data() {
			return {};
		},

		onLoad(options) {

		},

		methods: {
			// 开始使用(个人微信登录)
			getPhoneNumber(e) {
				let data = e.detail;
				if (!(e.detail && e.detail.errMsg == 'getPhoneNumber:ok')) {
					// 拒绝
					return false
				}
				this.login(data)
			},

			// 登录
			login(param) {
				let payload = {}
				if (param && param.encryptedData && param.iv) {
					payload.encryptedData = param.encryptedData
					payload.iv = param.iv
				}
				uni.showLoading({
					mask: true,
					title: "登录中...",
				})
				setTimeout(() => {
					uni.hideLoading()

					// 业务处理，跳到首页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 500);
				}, 1500);
			},

			/// 点击其他方式登录
			clickOtherLogin() {
				uni.navigateTo({
					url: '/uni_modules/zm-login-account/pages/login/loginAccountPage'
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-content {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #F5F9FC;

		.back-content {
			margin: 30rpx;
			padding: 30rpx;
			//  底部安全高度，顺序不要乱
			// padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: env(safe-area-inset-bottom);
			height: calc(100vh - 60rpx - constant(safe-area-inset-bottom) - 180rpx);
			height: calc(100vh - 60rpx - env(safe-area-inset-bottom) - 180rpx);
			border-radius: 20rpx;
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
			background: #FFFFFF;

			.flex-content {
				margin: 0rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.logoV {
					margin-top: 10vh;
					height: 200rpx;
					width: 200rpx;
				}

				.titleV {
					margin-top: 60rpx;
					font-size: 36rpx;
					color: #666666;
					text-align: center;
				}

				.wechatBtn {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;

					margin-top: 30vh;
					border-radius: 44rpx;
					background-image: linear-gradient(129deg, #FFE061 0%, #FFC723 100%);
					font-size: 36rpx;
					color: #1C1C1C;
				}

				.otherBtn {
					padding: 0rpx 30rpx;
					height: 88rpx;
					line-height: 88rpx;
					margin-top: 30rpx;

					background: none;
					color: #666666;
					font-size: 28rpx;
				}

				button::after {
					border: none;
				}
			}
		}
	}
</style>
